// // $(function () {

// //       class GoodList {
// //             constructor() {
// //                   this.loadListData()
// //                   this.bindEvent()
// //             }


// //             loadListData() {

// //                   let load = axios.create({
// //                         baseURL: "http://localhost:3000/static/data/"
// //                   })

// //                   this.options = {
// //                         url: "/list.json"
// //                   }
// //                   load(this.options)
// //                         .then((res) => {
// //                               console.log(res.data);
// //                         });
// //             }
// //             bindEvent() {
// //                   var _this = this
// //                   this.goods_list = $(".goods-list")

// //                   this.options(() => {
// //                         _this.render();
// //                   });
// //             }

// //             render() {
// //                   //如何访问到 this.data 里面的数据; 
// //                   this.goods_list.innerHTML = this.data.list.map(
// //                         item => `<div class="goods">
// //                                <img src="https://f0.mall.tcl.com/FuE7OOISdaa0573Y4FuL3xy-H_Vs" alt="">
// //                                <div class="title">TCL 灵悉C12全套系AI家电 65C12 量子点Mini LED智屏 65英寸 安桥Hi-Fi音响 120Hz 4GB+64GB 智慧全场景</div>
// //                                <div class="pri">
// //                                    14999.300元
// //                                </div>
// //                                <a target="_blank" href="/tv/30220a6153d24bd8ad5482f75c097c5c" class="addCart">立即购买</a>
// //                            </div>
// //                                            `
// //                   ).join("");
// //                   console.log(this, data);
                  
// //             }

// //       }
// //       new GoodList;
// // })





//  window.addEventListener( "load" , () => {
//        class GoodList{
//             getData(){
//                   var _this = this;
//                   $.getJSON("../static/data/list.json", function (json) {let data = json;
//                   //_this.bindEvent(data);
//                   _this.initPagination(data);});
//                   }
//              constructor(){

// //                   this.goods_list = document.querySelector(".goods-list")

// // //                   // 把列表数据赋值给data ; 
// //                   this.data = null;
//                    this.getData(()=>{
//                          this.render();
//                    });
//                    //this.bindEvent();
//              }
// //              bindEvent(){
// //                    on(this.goods_list,"click" ,".goods" , ( e )=>{
// // //                         // 跳转页面同时添加id值; 
// //                          this.go( e.origin.getAttribute("data-id" ));
// //                    });
// //              }
//             //  loadData( callback ){
//             //        let xhr = new XMLHttpRequest();
//             //        xhr.open("GET" , "http://127.0.0.1:8888/goods/list");
//             //      xhr.send(); 
//             //        xhr.onload = ()=>{
//             //              this.data = JSON.parse( xhr.responseText )
//             //              callback();
//             //        }
//             //  }
//              render(){
//                    //如何访问到 this.data 里面的数据; 
//                    this.goods_list.innerHTML = this.data.list.map(
//                         item => `<div class="goods">
//                                <img src="https://f0.mall.tcl.com/FuE7OOISdaa0573Y4FuL3xy-H_Vs" alt="">
//                                <div class="title">TCL 灵悉C12全套系AI家电 65C12 量子点Mini LED智屏 65英寸 安桥Hi-Fi音响 120Hz 4GB+64GB 智慧全场景</div>
//                                <div class="pri">
//                                    14999.300元
//                                </div>
//                                <a target="_blank" href="/tv/30220a6153d24bd8ad5482f75c097c5c" class="addCart">立即购买</a>
//                            </div>
//                                            `
//                   ).join("");
                  
//                    console.log( this.data );
//              }
//              go( id ){
//                    location.href = "./goodsDetail.html#id=" + id;
//            }
//        }
//        new GoodList;
//  });

// $(function(){
//       $.ajax({    
//           //请求方式    
//           type:"GET",    
//           //文件位置    
//           url:"../static/data//list.json",  
//           //返回数据格式为json,也可以是其他格式如    
//           dataType: "json",    
//           //请求成功后要执行的函数，拼接html    
//           success: function(data){    
//               var str="<div class=goods>";    
//               $.each(data,function(i,n){    
//                   str+="<img>"+n.img;  
//                   str+="<div class=title>"+n.title+"</div>";  
//                   str+="<div class=pri>"+n.url+"</div>";  
//               });   
              
//               str+="</div>";    
//               $("div").append(str);    
//           }    
//       });    
//   }); 




window.addEventListener( "load" , () => {
      class GoodList{
            constructor(){


                  
                  this.goods_list = document.querySelector(".goods-list")
                  //this.pagination = document.querySelector(".pagination");
                  // 把列表数据赋值给data ; 
                  this.data = null;
                  this.loadData(()=>{
                        this.render();
                  });
                  this.bindEvent();
                  
            }
             bindEvent(){
                   on(this.goods_list,"click" ,".goods" , ( e )=>{
                         // 跳转页面同时添加id值; 
                         this.go( e.origin.getAttribute("data-id" ));
                   });
             }
            loadData( callback ){
                  let xhr = new XMLHttpRequest();
                  xhr.open("GET" , "http://localhost:3000/static/data/list.json");
                  xhr.send(); 
                  xhr.onload = ()=>{
                        this.data = JSON.parse( xhr.responseText )
                        callback();
                  }
            }
            render(){
                  //如何访问到 this.data 里面的数据; 
                  

                  this.goods_list.innerHTML = this.data.data.map(
                        item =>     
                  `
                  <div class="goods" data-id=${item.id}>
                                          <img src="${item.img.src}" alt="">
                                          <div class="title">${item.title}</div>
                                          <div class="pri">${item.price}</div>
                                          <a target="_blank" href="/tv/30220a6153d24bd8ad5482f75c097c5c" class="addCart">立即购买</a>
                                    </div>
                                    
                                    `
                  ).join("");
                  console.log( this.data );
                  
            }
            
            go( id ){
                  location.href = "./goodsDetails.html#id=" + id;
            }
      }
      new GoodList;
      //

      
});



(function() {
	ajax({
		type: "get",
		url: "http://localhost:3000/static/data/list.json",
		dataType: "json",
		success: function(res) {
			var str = "<ul class='con_ul'>";
			$.each(res.books, function(idx, val) {
				str += "<li class=\"sec_li\"><a href='goodsDetail.html?booksId=" + val.id + "' class='lp_li_a'><div class='lp_li_imgWrap'><img src='" + val.imgUrl + "'/></div><p class='lp_li_name'>" + val.title + "</p><p class='lp_li_price'>" + '￥' + val.price + "</p></a><li>";
			});
			str += "</ul>";
			$('.content').append(str);
		},
		// error: function() {
		// 	alert(error)
		// }
	});
})





$(".con").click(() => {
      $(".last").css("display", "block");
      $(".con").css("display", "none")
      $(".trol").css("display", "block")
})
$(".trol").click(() => {
      $(".last").css("display", "none");
      $(".trol").css("display", "none")
      $(".con").css("display", "block")
})
$(".N").click(function () {
      $(".Y").removeClass("on")
      $(".N").addClass("on")
      $(".Textarea").css("display", "block")
      $("button").css("display", "block")
})
$(".Y").click(function () {
      $(".N").removeClass("on")
      $(".Y").addClass("on")
      $(".Textarea").css("display", "block")
      $("button").css("display", "block")
})
$("button").click(() => {
      $(".Textarea").css("display", "none")
      $("button").css("display", "none")
      alert("提交成功")
})
$("#bd_over").click(() => {
      $(".bd").addClass("none")
})
var commod_list = document.querySelector(".commod-list")
//分页管理器
let datalist = []
$.ajax({
      method: 'get',
      url: "../static/data/goods.json",
      success: function (res) {
            datalist = res;
            new Pagination(res, { show_num: 20 })
            sortup(res);
            sortdown(res);
      }
})
window.onload = function () {
      // 获取图片列表，即img标签列表
      var imgs = document.querySelectorAll('img');

      // 获取到浏览器顶部的距离
      function getTop(e) {
            return e.offsetTop;
      }

      // 懒加载实现
      function lazyload(imgs) {
            // 可视区域高度
            var h = window.innerHeight;
            //滚动区域高度
            var s = document.documentElement.scrollTop || document.body.scrollTop;
            for (var i = 0; i < imgs.length; i++) {
                  //图片距离顶部的距离大于可视区域和滚动区域之和时懒加载
                  if ((h + s) > getTop(imgs[i])) {
                        // try {
                        if (imgs[i].getAttribute('data-src') !== null)
                              imgs[i].src = imgs[i].getAttribute('data-src')
                        // } catch (error) {}
                  }
            }
      }
      lazyload(imgs);

      // 滚屏函数
      window.onscroll = function () {
            lazyload(imgs);
      }
}




